<template>
  <div class="login">
    
     <div class="login-container">
     <div class="title">用户登录</div>
      <!-- 用户登录的表单 -->
      <el-form
        :model="user"
        label-width="auto"
        style="max-width: 400px"
        :rules="rules"
        ref="loginFormRef"
        @submit="handleLogin"
        >
        <el-form-item label="用户名" prop="username">
          <el-input 
          v-model="user.username" 
          placeholder="请输入用户名" 
          />
        </el-form-item> 

    <el-form-item label="密码" prop="password">
          <el-input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
    <el-form-item  prop="type">
        <el-checkbox v-model="user.remember" name="type">
          记住用户与密码
        </el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit"  @click="" class="login-btn">登录</el-button>
    </el-form-item>
  </el-form>



     </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue"
import  {useRouter} from "vue-router"
import useUserStroe from "../../store/user";
import { ElMessage } from "element-plus";

// 加密算法的引入
import CryptoJS from 'crypto-js'
import { de } from "element-plus/es/locales.mjs";

// 加解密使用到的密钥
const secret = "akldjd198524jsdas.a,dfqonfush"


const router = useRouter()
const userStroe= useUserStroe()


// 登录使用到的用户账号信息
const user = ref<ILoginAccount>({
  username:"admin1",
  password:"admin",
  remember:false,
})


//初始加载时，如果本地有保存记住的用户账号信息，则读取处该账号信息
// 还原显示到表单中，由于保存的账号会经加密处理，所以在还原时需要对饮的解密

const  load =()=>{
  // 读取本地保存的账号信息
  const account = localStorage.getItem("account")
  if(account){
    // 有账号信息，则解密处理
    // decrypt 第一位参数化：需要解密的值 ， 第二位参数时解密的密钥
    const  origin = CryptoJS.AES.decrypt(account,secret).toString(CryptoJS.enc.Utf8)
    console.log("oeign:解密后:",origin)
    // 将使用=号将明文数据进行分割处理分割
    const [username,password] = origin.split("=")
    // 设置到user 对象中
    user.value =  {
      username,
      password,
      remember:true ,
    }
   }
}
load()
// 表单字段校验规则
interface IAccountRules{ 
  username:string
  password:string
}
// 表单字段校验规则
const rules = ref<any>({
  username:[
    {required:true,message:"用户名必填！",trigger:"blur"}
  ],
  password:[
    {required:true,message:"密码必填",trigger:"blur"},
    {min:5,max:20,messagea:"密码长度再6-20位",trigger:"blur" }
  ]
})

// 引用登录表单的组件实例
const loginFormRef = ref()
// 处理登录
const handleLogin = async (event:any) =>{
  // 阻止表单提交的默认行为
  event.preventDefault()
  // console.log("登录...")
try{
    // 调用表单组件实例提供（暴露出来）的方法，进行表单验证
  // 表单验证通过后，才能发送网络请请求进行用户验证
const result =  await loginFormRef.value.validate()
  // console.log("表单提交通过",result)
  
  if(result){ //表单校验通过
    // 调用store中提供的登录action方法
    // 将登录成功后的数据
 const { success,message}  = await  userStroe.loginAction(user.value)
 if(success){
// 登录成功后跳转主页面，如果勾选了记住密码，将密码保存到本地，未勾选将本已保存的密码删除
  if(user.value.remember){ //记住
    const account = user.value.username + "=" +user.value.password

    // 将带保存到本地的用户账号数据进行加密处理
    const pass = CryptoJS.AES.encrypt(account,secret).toString()

    // 将加密后的数据保存到本地
    localStorage.setItem("account",pass)
  }else{ //不记住
    localStorage.removeItem("account")
    

  }
// 跳转主路劲
  router.push("/dashboard")

}else{
  ElMessage({
    message,
    type:"error"
  })
}

  }
}catch(errer){
  console.log("表单提交异常",errer)
}
}
onMounted(()=>{
  console.log("挂载结束后",loginFormRef.value)
  console.log("查看user.value:",user.value)
})

</script>

<style lang="less" scoped>
.login{
  display: flex;
  height: 100vh;
  &-container{
    width: 400px;
    height: fit-content;
    padding: 24px;
    margin: auto;
    border: 1px solid #000;
  }
  .title{
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 4;
}

&-btn{
  display:block ;
  width: 100%;
}
}


</style>
